<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <question-bank
          :tableData="tableData"
          @tableDatas="tableDatas"
        ></question-bank>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="130">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="80">
          </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="200">
            <template slot-scope="scope">
              <span v-html="scope.row.question"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="200px" prop="id">
            <template slot-scope="scope">
              <el-button
                type="primary"
                circle
                plain
                icon="el-icon-view"
                size="small"
                @click="preview(scope.row.id)"
              />
              <el-button
                type="success"
                circle
                size="small"
                plain
                icon="el-icon-edit"
                @click="$router.push(`new?id=${scope.row.id}`)"
              />
              <el-button
                type="warning"
                circle
                size="small"
                plain
                icon="el-icon-delete"
                @click="delTopic(scope.row.id)"
              />
              <el-button
                type="danger"
                circle
                size="small"
                plain
                icon="el-icon-check"
                @click="addHandpick(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 预览对话框 -->
        <el-dialog title="题目浏览" :visible.sync="showQuest" width="63%">
          <questions-preview :listObj="listObj"></questions-preview>
          <span slot="footer" class="footerFn">
            <el-button type="primary" @click="showQuest = false"
              >关 闭</el-button
            >
          </span>
        </el-dialog>

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-size="query.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import QuestionBank from '@/components/questionBank'
import questionsPreview from '../components/articles-preview.vue'
export default {
  name: 'questions',
  data () {
    return {
      tableData: [], // 表格数据
      query: {
        counts: 0, // 总记录数
        page: 1, // 当前页
        pagesize: 5 // 每页显示条数
      },
      total: 0, // 总页数
      showQuest: false, // 默认不展示弹窗
      parentId: '', // 要传递的id
      listObj: {}
    }
  },
  components: {
    QuestionBank,
    questionsPreview
  },
  created () {
    this.questionsList()
  },

  methods: {
    // 获取题库列表
    async questionsList () {
      // 调用基础题库列表接口
      const res = await list(this.query)
      this.tableData = res.data.items
      // 总页数
      this.total = res.data.counts
    },

    // 题目预览
    async preview (id) {
      this.parentId = id
      // 展示弹框
      this.showQuest = true
      // 调用基础题库详情接口
      const { data } = await detail({ id })
      // console.log(data);
      this.listObj = data
    },

    // 删除试题
    delTopic (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove({ id })
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.query.page = 1
            this.questionsList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      //   if (delRes === "cancel") return this.$message("已取消删除");
      //   // 调用基础题库删除接口
      //   const res = await remove({ id });
      //   if (this.tableData.length === 1) {
      //     this.query.page--;
      //     if (this.query.page <= 0) {
      //       this.query.page = 1;
      //     }
      //   }
      //   // 删除成功后的提示
      //   this.$message.success(res.message);
      //   // 重新获取题库列表
      //   this.questionsList();
    },

    // 加入精选
    addHandpick (id) {
      this.$confirm('此操作将加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          // 调用精选题库加入取消接口
          await choiceAdd({
            id,
            choiceState: 1
          })
          this.$message({
            type: 'success',
            message: '加入精选题库成功!'
          })
          // 添加成功后跳转到精选题库
          this.$router.push('choice')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },

    // 点击搜索
    tableDatas (res) {
      this.query = { ...this.query, ...res }
      this.questionsList()
    },

    // 弹框关闭
    DiaClose () {
      this.isVideo = false
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newPageSize) {
      this.query.pagesize = newPageSize
      this.questionsList()
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.questionsList()
    }
  }
}
</script>

<style Lang="scss" scoped>
.el-alert {
  margin-bottom: 10px;
}
.el-pagination {
  margin-top: 20px;
  margin-bottom: 20px;
  float: right;
}
</style>
